import {Avatar, Card, Row, Col, Typography, Layout} from 'antd';
import TabBar from "../../components/TabBar/TabBar";
import {
    FileTwoTone,
    PushpinTwoTone,
    RedEnvelopeTwoTone,
    HomeTwoTone,
    ReconciliationTwoTone,
    DollarTwoTone,
    StarTwoTone,
    HeartTwoTone, RightCircleTwoTone,
    getTwoToneColor, setTwoToneColor, StopTwoTone
} from '@ant-design/icons';
import './index.css';
import {useNavigate} from "react-router-dom";
import React, {useContext, useEffect} from "react";
import {GlobalContext} from "../../contexts/GlobalContext";

const { Content } = Layout;
export default function User() {
    const { user } = useContext(GlobalContext);

    const { dispatch } = useContext(GlobalContext); // 使用 context 获取 dispatch
    setTwoToneColor('#FE4E84');
    getTwoToneColor(); // #eb2f96
    const navigate = useNavigate();
    const logout = () => {
        localStorage.setItem('username', ' ');
        dispatch({ type: 'logout' }); // 调用 dispatch 执行登出操作
        navigate('/home')
    };
    const username = localStorage.getItem("username")
    useEffect(() => {
        //console.log(123)
        testLogin();
    }, );

    const testLogin = () =>{
        console.log(123)
        if(localStorage.getItem("username")!=='user'){
            console.log(user.username)
            navigate('/login')
        }
    }


    const toOrder = () => {
        navigate('/myorder/all')
    }
    const toFukuan = () => {
        navigate('/myorder/topay')
    }
    const toShouhuo = () => {
        navigate('/myorder/toreceive')
    }
    const toAfter = () => {
        navigate('/myorder/aftersale')
    }
    const initialTabIndex = 3; // 例如初始化为1
    return (
        <div className="outer-container" style={{ minHeight:'100vh', margin:'auto'}}>
            <Layout >
                <div className="user-home" style={{ backgroundColor:"rgba(239,171,193,0.99)"}}>
                    <div bordered={true} style={{ backgroundSize: 'cover',backgroundPosition: 'center', backgroundColor:"#fffcd0",height: 200, display: 'flex', alignItems: 'center' , borderRadius:'0 0 10px 10px'}}>
                        <Row gutter={[16, 16]}>
                            <Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" size={64} style={{ marginRight: 16 }} />
                            <h2 style={{ marginTop: 20 }}>名字</h2>
                        </Row>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'center' }}>
                        <Card title="个人信息"  bordered={true} hoverable={true} style={{ marginTop: 10,width:"95%"}}>
                            <Row gutter={[16, 16]}>
                                <Col span={8}>
                                    <p>50000</p>
                                    <p>积分</p>
                                </Col>
                                <Col span={8}>
                                    <p>1000</p>
                                    <p>成长值</p>
                                </Col>
                                <Col span={8}>
                                    <p>暂无</p>
                                    <p>优惠券</p>
                                </Col>
                            </Row>
                        </Card>
                    </div>

            <div style={{ display: 'flex', justifyContent: 'center' }}>
                <Card title="订单信息"  bordered={true} hoverable={true} style={{ marginTop: 5,width:"95%" }}>
                    <Row gutter={[16, 16]}>
                        <Col span={6}>
                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }} onClick={toOrder}>
                                <ReconciliationTwoTone style={{ fontSize: '32px' }}/>
                                <Typography.Text>全部订单</Typography.Text>
                            </div>
                        </Col>
                        <Col span={6}>
                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}  onClick={toFukuan}>
                                <RedEnvelopeTwoTone style={{ fontSize: '32px' }} />
                                <Typography.Text>待付款</Typography.Text>
                            </div>
                        </Col>
                        <Col span={6}>
                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}  onClick={toShouhuo}>
                                <HomeTwoTone style={{ fontSize: '32px' }} />
                                <Typography.Text>待收货</Typography.Text>
                            </div>
                        </Col>
                        <Col span={6}>
                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}  onClick={toAfter}>
                                <DollarTwoTone style={{ fontSize: '32px' }} />
                                <Typography.Text>退款/售后</Typography.Text>
                            </div>
                        </Col>
                    </Row>
                </Card>
            </div>


            <div style={{ display: 'flex', justifyContent: 'center' }}>
                <Card title="个人管理" bordered={true} hoverable={true} style={{ marginTop: 5 ,width:"95%"}}>
                    <Row gutter={[14, 14]}>
                        <Col span={24}>
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <PushpinTwoTone style={{ fontSize: '32px', marginRight: '8px' }} />
                                    <Typography.Text>我的足迹</Typography.Text>
                                </div>
                                <RightCircleTwoTone style={{ fontSize: '20px' }} />
                            </div>
                        </Col>
                        <Col span={24}>
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <HeartTwoTone style={{ fontSize: '32px', marginRight: '8px' }} />
                                    <Typography.Text>我的关注</Typography.Text>
                                </div>
                                <RightCircleTwoTone style={{ fontSize: '20px' }} />
                            </div>
                        </Col>
                        <Col span={24}>
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <StarTwoTone style={{ fontSize: '32px', marginRight: '8px' }} />
                                    <Typography.Text>我的收藏</Typography.Text>
                                </div>
                                <RightCircleTwoTone style={{ fontSize: '20px' }} />
                            </div>
                        </Col>
                        <Col span={24}>
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <FileTwoTone  style={{ fontSize: '32px', marginRight: '8px' }} />
                                    <Typography.Text>我的评级</Typography.Text>
                                </div>
                                <RightCircleTwoTone style={{ fontSize: '20px' }} />
                            </div>
                        </Col>
                        <Col span={24}>
                            <div
                                style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
                               onClick={logout} // 在点击时触发 handleLogout 函数
                            >
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <StopTwoTone style={{ fontSize: '32px', marginRight: '8px' }} />
                                    <Typography.Text>退出登录</Typography.Text>
                                </div>
                                <RightCircleTwoTone style={{ fontSize: '20px' }} />
                            </div>
                        </Col>
                    </Row>
                </Card>
            </div>
            <TabBar initialTabIndex={initialTabIndex}/>
        </div>
            <div style={{ height:'50px'}}></div>
        </Layout>
        </div>

    );
}